<template>
  <div>
    <el-container>
      <el-aside width="160px">
        <my-menu @menu-click="onMenuClick"></my-menu>
      </el-aside>
      <el-main>
        <div class="title">
          <h7>
            <b>{{name}}</b>
          </h7>
        </div>
        <span v-if="dci==0 && dcj==0">
          <my-order></my-order>
        </span>
        <span v-if="dci==1 && dcj==0">
          <my-cart></my-cart>
        </span>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import myMenu from "./index/c_menu";
import myOrder from "./order/c_order";
import myCart from './cart/c_cart';
export default {
  components: {
    myMenu,
    myOrder,
    myCart,
  },
  data() {
    return {
      dci: 0,
      dcj: 0,
      name: "订单中心 - 我的订单"
    };
  },
  methods: {
    onMenuClick(i, j, name1,name2) {
      this.dci = i;
      this.dcj = j;
      this.name = `${name1} - ${name2}`;
    //   console.log(i, j, name);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-aside {
  padding-left: 15px;
}
.el-main {
  //   border: 1px solid;
  //   margin: -20px;
  padding: 0;
}
.title {
  width: 1240px;
  // line-height: 50px;
  padding: 15px;
  background: white;
  margin-bottom: 20px;
}
</style>